@import "highlight.js/styles/github-dark.css";
@import "tailwindcss";


@tailwind base;
@tailwind components;
@tailwind utilities;


:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

h1, h2, h3 {
  scroll-margin-top: 60px; /* 顶部栏高度，按你页面的 header 高度来 */
}

.prose pre {
  @apply overflow-x-auto max-w-full bg-gray-100 p-4 rounded my-4;
}

.prose pre code {
  @apply block whitespace-pre;
}

.prose ul li a {
  color: black;
  text-decoration: none;
}

.prose h3 a {
  color: black;
  text-decoration: none;
}

.prose a {
  color: #1e90ff;
  text-decoration: underline;
}

.code-block-container {
  overflow-x: auto;
}

pre::before {
  content: attr(data-language);
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  font-size: 0.75rem;
  color: #fff;
  padding: 0.1rem 0.4rem;
  border-radius: 0.25rem;
}

/* globals.css */
.hljs {
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: #f5f5f5; /* 或直接让 highlight.js 来控制 */
}


body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}
